<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div class='floor' v-for="(floor,index) in floors">
            <div class="floor-top">
                <h4 class="floor-top-title">
                    {{ floor.title }}
                </h4>
            </div>
            <div class="floot-main">
                <ul>
                    <li class="item" v-for="(item,index2) in floor.lists">
                        <h5 class="item-name">
                            {{ item.itemName }}
                        </h5>
                        <p class="price">
                            {{ item.itemPrice }}
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                floors:[
                    {
                        title:"手机",
                        lists:[
                            {
                                itemName:"小米10",
                                itemPrice:9.9
                            },
                            {
                                itemName:"华为p40",
                                itemPrice:19.9
                            },
                            {
                                itemName:"商品3",
                                itemPrice:29.9
                            },
                        ]
                    },
                    {
                        title:"家电",
                        lists:[
                            {
                                itemName:"电视1",
                                itemPrice:9.9
                            },
                            {
                                itemName:"电视2",
                                itemPrice:19.9
                            },
                            {
                                itemName:"电视3",
                                itemPrice:29.9
                            },
                        ]
                    },
                    {
                        title:"数码",
                        lists:[
                            {
                                itemName:"电脑1",
                                itemPrice:9.9
                            },
                            {
                                itemName:"电脑2",
                                itemPrice:19.9
                            },
                            {
                                itemName:"电脑3",
                                itemPrice:29.9
                            },
                        ]
                    }
                ]
            }
        })
    </script>
</body>

</html>